import React, { useEffect, useRef } from 'react'
import * as echarts from 'echarts'

const EchartsComponent = () => {
  const chartRef = useRef(null)

  useEffect(() => {
    const chart = echarts.init(chartRef.current)
    const option = {
      // ECharts 配置项
      series: [
        {
          type: 'line',
          smooth: true,
          data: [820, 932, 901, 934, 1290, 1330, 1320]
        },
        {
          type: 'line',
          smooth: true,
          data: [80, 92, 91, 94, 1000, 130, 120]
        }
      ],
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      }
    }

    chart.setOption(option)

    return () => {
      chart.dispose() // 清理 chart 实例
    }
  }, [])

  return <div ref={chartRef} style={{ width: '100%', height: '300px' }}></div>
}

export default EchartsComponent
